<template>
	<view class="center">
		<hea-ders title="已拜访记录">
			<image slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
			<image slot='Lright' src="@/static/images/s36.png" mode="widthFix" @click="Sizer"></image>
		</hea-ders>
	<!-- 	<view class="tit"></view>
		<view class="title">
			<image src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
			<text>已拜访记录</text>
			<view class="ima" @click="Sizer">
				<image src="@/static/images/路径 731.png" mode="widthFix"></image>
				<image src="@/static/images/tb_icon.png" mode="widthFix"></image>
			</view>
		</view> -->
		<view class="dates">
			<text>2020年06月05日 星期五</text>
		</view>
		<view class="list">
			<view class="info_icon mags">
				<image src="@/static/images/s5.png" mode="widthFix"></image>
				<text>4567</text>
			</view>
			<view class="info_iconz mags">
				<view class="info_icons">
					<image src="@/static/images/s6.png" mode="widthFix"></image>
					<text class="">18712341234</text>
				</view>
				<view class="info_icons">
					<image src="@/static/images/s7.png" mode="widthFix"></image>
					<text class="">10:48-10:56(8分)</text>
				</view>
			</view>
			<view class="info_icon mags">
				<image src="@/static/images/s8.png" mode="widthFix"></image>
				<text class="fan">拜访总结拜访总结拜访总结拜访总结</text>
			</view>
			<view class="info_icon mags">
				<image src="@/static/images/s9.png" mode="widthFix"></image>
				<text class="fan">江苏省徐州市泉山区中山南路4号</text>
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="tab" v-if="flag">
			<view :animation='animationData' class="cont">
				<view class="character">
					<text style="color: rgba(36, 153, 246, 1);font-size: 24rpx;width: 40%;" @click="cancel">取消</text>
					<text style="font-size:30rpx;">筛选条件</text>
				</view>
				<view class="characte">
					<text>客户名称</text>
					<view class="rights" @click="clineterName">
						<text>选择</text>
						<image src="@/static/images/arrow_right.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="characte">
					<text>拜访日期</text>
					<view class="rights">

						<image class="qi" v-if="flags" src="@/static/images/s10.png" mode="widthFix" @click=" !flagz&& qi()"></image>
						<image class="qi" v-else src="@/static/images/s11.png" mode="widthFix" @click="qi"></image>
						<text @click="flags && xunz()">选择</text>
						<image v-if="!flagz" src="@/static/images/arrow_right.png" mode="widthFix"></image>
						<image v-else src="@/static/images/1465.png" mode="widthFix"></image>
					</view>
				</view>
				<!-- 起止弹窗 -->
				<view class="qiz" v-if="!flags">
					<picker mode="date" :value="date" @change="bindDateChange">
					  <text>拜访日期（起） {{date}} </text>
					</picker>
					<picker mode="date" :value="dates" @change="bindDateChanges">
					  <text>拜访日期（止） {{dates}} </text>
					</picker>
					
				</view>
			
				<!-- 选择弹窗 -->
				<view class="ima" v-if="flagz">
					<text @click="face('0')"
					style="display: inline-block; 
					border-bottom: 1rpx solid #e0e0e0;    
					width: 100%;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					font-size: 35rpx;
					color:rgba(158,158,158,1);
					">最近1天</text>
					<image v-if="courct == 0" src="@/static/images/s14.png" mode="widthFix" ></image>
				</view>
				<view class="ima" v-if="flagz">
					<text @click="face('1')"
					style="display: inline-block; 
					border-bottom: 1rpx solid #e0e0e0;    
					width: 100%;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					font-size: 35rpx;
					color:rgba(158,158,158,1);
					">最近3天</text>
					<image v-if="courct ==  1" src="@/static/images/s14.png" mode="widthFix" ></image>
				</view>
				<view class="ima" v-if="flagz">
					<text @click="face('2')"
					style="display: inline-block; 
					border-bottom: 1rpx solid #e0e0e0;    
					width: 100%;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					font-size: 35rpx;
					color:rgba(158,158,158,1);
					">最近7天</text>
					<image v-if="courct == 2" src="@/static/images/s14.png" mode="widthFix" ></image>
				</view>
				<view class="ima" v-if="flagz">
					<text @click="face('3')"
					style="display: inline-block; 
					border-bottom: 1rpx solid #e0e0e0;    
					width: 100%;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					font-size: 35rpx;
					color:rgba(158,158,158,1);
					">最近15天</text>
					<image v-if="courct == 3" src="@/static/images/s14.png" mode="widthFix" ></image>
				</view>
				<view class="ima" v-if="flagz">
					<text @click="face('4')"
					style="display: inline-block; 
					border-bottom: 1rpx solid #e0e0e0;    
					width: 100%;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					font-size: 35rpx;
					color:rgba(158,158,158,1);
					">最近30天</text>
					<image v-if="courct == 4" src="@/static/images/s14.png" mode="widthFix" ></image>
				</view>
				<view class="chara">
				<view class="btn"></view>
				<view class="btns"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import heaDers from '@/pages/header/header.vue'
	export default {
		components:{
			heaDers
		},
		data() {
			 const currentDate = this.getDate({
			   format: true
		 })
			return {
				flag:false,
				flags:true,
				flagz:false,
				date: currentDate,
				dates: currentDate,
				animationData:{},
				courct:0
			}
		},
			onShow: function(){
					// 初始化一个动画
					var animation = uni.createAnimation({
							duration: 1000,
							timingFunction: 'ease',
					})
					this.animation = animation
				},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})	
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			bindDateChanges: function(e) {
				this.dates = e.target.value
			},
			  getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
						year = year - 60;
				} else if (type === 'end') {
						year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 弹窗
			Sizer(){
				this.flag = !this.flag
				if(this.flag){
					this.rotateAndScale()
				}
					
			},
			// 定义进去动画内容
			rotateAndScale() {
					// 定义动画内容
					this.animation.translateY(-180).step()
					// 导出动画数据传递给data层
					this.animationData = this.animation.export()
			},
			
			cancel(){
				var item = setTimeout(()=>{
						this.flag = !this.flag
					},500)
				this.norotateAndScale(item)
			},
			// 定义退出动画内容
			norotateAndScale() {
				// 定义动画内容
					 this.animation.translateY(180).step()
					 // 导出动画数据传递给data层
					 this.animationData = this.animation.export()
			 },
			qi(){
				this.flags = !this.flags
			},
			xunz(){
				this.flagz = !this.flagz
			},
			face(index){
				this.courct = index
				console.log(index)
			},
			//客户
			clineterName(){
				uni.navigateTo({
					url:'../clientername/clientername'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		background: rgba(245, 245, 245, 1);

		.tit {
			
			width: 100%;
			height: 50rpx;
			box-sizing: border-box;
		}

		.title {
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(36, 153, 246, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
			
				width: 22rpx;
			}

			text {
				font-size: 36rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
			}

			.ima {
				image {
					width: 40rpx;
					margin-left: 5rpx;
				}
			}
		}

		.dates {
			width: 100%;
			padding: 10rpx;
			box-sizing: border-box;

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 40rpx;
				color: rgba(66, 66, 66, 1);
				opacity: 1;
			}
		}

		.list {
			width: 100%;
		
			background: #fff;
			padding: 5rpx 10rpx;
			box-sizing: border-box;

			.info_icon {
				image {
					width: 28rpx;
					margin-right: 10rpx;
					vertical-align: middle;
				}

				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 40rpx;
					color: rgba(33, 33, 33, 1);
					opacity: 1;
				}

				.fan {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: rgba(117, 117, 117, 1);
					opacity: 1;
				}
			}

			.info_iconz {
				
				display: flex;
				justify-content: space-between;

				image {
					width: 28rpx;
					margin-right: 10rpx;
					vertical-align: middle;
				}

				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 40rpx;
					color: rgba(33, 33, 33, 1);
					opacity: 1;
				}

				.info_icons {
					text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 40rpx;
						color: rgba(117, 117, 117, 1);
						opacity: 1;
					}
				}
			}
		}

		.tab {
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			background: rgba(0, 0, 0, 0.5);

			.cont {
				position: absolute;
				left: 0;
				bottom: -180px;
				width: 100%;
				background: #fff;
				.character {
					padding: 20rpx;
					display: flex;
					text {
						display: inline-block;
					}
				}
				.characte {
					padding: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom:1rpx solid #e0e0e0;
					text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 40rpx;
						color: rgba(66, 66, 66, 1);
						opacity: 1;
					}

					.rights {
						text {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							line-height: 40rpx;
							color: rgba(158, 158, 158, 1);
							opacity: 1;
							margin-left: 10rpx;
						}
						.qi {
							width: 80rpx;
						}
						image {
							margin-left: 10rpx;
							vertical-align: middle;
							width: 20rpx;
						}
					}
				}
				.chara {
					display: flex;
					.btn {
						width: 100%;
						height:88rpx;
						flex: 1;
						background: url(@/static/images/s12.png) no-repeat;
						background-size: 100% 100%;
						box-sizing: border-box;
					}
					.btns {
						width: 100%;
						height:88rpx;
						flex: 1;
						background: url(@/static/images/s13.png) no-repeat;
						background-size: 100% 100%;
						box-sizing: border-box;
					}
				}
				.ima {
					position: relative;
					image {
						width: 88rpx;
						position: absolute;
						right: 0;
						top: 0;
					}
				}
				.qiz {
					text {
						display: flex;
						padding: 30rpx;
						display: block;
						background: rgba(245, 245, 245, 1);
						border-bottom:1rpx solid #e0e0e0;
						font-size:28rpx;
						font-family:PingFang SC;
						font-weight:500;
						line-height:40rpx;
						color:rgba(66,66,66,1);
						opacity:1;
					}
				}
			}
		}
	}
	.mags{
		margin: 10rpx 0;
	}
</style>
